<template>
  <div class="titlebar">
    <div class="titlebarContent" data-tauri-drag-region>
      <div class="titlebar-button" id="titlebar-minimize">
        <c-button @click="appWindow.minimize()" size="tiny" iconName="MinimizeRound" quaternary>
        </c-button>
      </div>
      <div class="titlebar-button" id="titlebar-maximize">
        <c-button iconName="Maximize24Regular" size="tiny" @click="appWindow.toggleMaximize()" quaternary>
        </c-button>
      </div>
      <div class="titlebar-button" id="titlebar-close">
        <c-button @click="appWindow.hide()" size="tiny" iconName="CloseRound" quaternary>
        </c-button>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { appWindow } from '@tauri-apps/api/window' 
</script>

<style lang="scss" scoped>
.titlebar {
  z-index: 1;
  user-select: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 5px;
}

.titlebarContent {
  height: 30px;
  display: flex; 
  justify-content: flex-end;
}
</style>